<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    class="order-kind-dialog medium-common-dialog-size mobile-el-dialog">
    <Title title="请选择合并后的问题名称" font-size="16px" style="margin-bottom: 16px;"/>
    <div :style="{maxHeight: maxHeight}" class="radio-box">
      <div v-for="(item,index) in mergeData" :key="item.id">
        <el-radio v-model="mergeId" :label="item.id" style="width:100%">
          <ToolTip :content="item.content || `问题${index}`" />
        </el-radio>
      </div>
    </div>
    <div class="btn-container">
      <el-button :loading="confirmLoading" type="primary" size="small" @click="handleOk">确定</el-button>
      <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import remarkInput from '@/views/flyNotice/components/remarkInput';
import { mapState } from 'vuex';
import { mergeQuestion } from '@/api/question';
import ElMessage from '@/utils/message';

export default {
  components: { Title, remarkInput },
  data() {
    return {
      dialogVisible: false,
      confirmLoading: false,
      mergeData: [],
      mergeId: 0,
      maxHeight: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    initData(data) {
      this.dialogVisible = true;
      this.mergeData = data;
      const clientHeight = window.innerHeight;
      this.maxHeight = ((clientHeight * 2) / 3) + 'px';
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async handleOk() {
      if (!this.mergeId) {
        ElMessage.warning('请先选择合并后的问题名称');
        return;
      }
      const ids = this.mergeData.map(item => {
        return item.id;
      }).join();
      const params = { id: this.mergeId, mergeId: ids };
      this.confirmLoading = true;
      const res = await mergeQuestion(params);
      this.confirmLoading = false;
      if (res.code === 200) {
        ElMessage.success('合并成功');
      }
      this.$emit('updateData');
      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.radio-box {
  margin-left: 9px;
  @include scrollBar($width: 6px);
  ::v-deep {
    .el-radio {
      display: flex;
      margin-bottom: 16px;
      .el-radio__label {
        width: 100%;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>
